import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'

// 导入Markdown文件
import IntroToPinia from '../markdown/01-intro-to-pinia.md'
import DefineStoreOptions from '../markdown/02-define-store-options.md'
import StateOptions from '../markdown/03-state-options.md'
import GettersOptions from '../markdown/04-getters-options.md'
import ActionsOptions from '../markdown/05-actions-options.md'
// import DefineStoreComposition from '../markdown/02-define-store-composition.md'

// 创建路由
const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'home',
      component: HomeView
    },
    {
      path: '/intro',
      name: 'intro',
      component: () => import('../views/TutorialView.vue'),
      props: { 
        title: '认识 Pinia',
        markdown: IntroToPinia
      }
    },
    {
      path: '/define-store-options',
      name: 'defineStoreOptions',
      component: () => import('../views/TutorialView.vue'),
      props: { 
        title: '定义 Store (选项式)',
        markdown: DefineStoreOptions
      }
    },
    {
      path: '/state-options',
      name: 'stateOptions',
      component: () => import('../views/TutorialView.vue'),
      props: { 
        title: 'State (选项式)',
        markdown: StateOptions
      }
    },
    {
      path: '/getters-options',
      name: 'gettersOptions',
      component: () => import('../views/TutorialView.vue'),
      props: { 
        title: 'Getters (选项式)',
        markdown: GettersOptions
      }
    },
    {
      path: '/actions-options',
      name: 'actionsOptions',
      component: () => import('../views/TutorialView.vue'),
      props: { 
        title: 'Actions (选项式)',
        markdown: ActionsOptions
      }
    },
    /* 注释掉组合式API相关路由
    {
      path: '/define-store-composition',
      name: 'defineStoreComposition',
      component: () => import('../views/TutorialView.vue'),
      props: { 
        title: '定义 Store (组合式)',
        markdown: DefineStoreComposition
      }
    },
    {
      path: '/state-composition',
      name: 'stateComposition',
      component: () => import('../views/TutorialView.vue'),
      props: { 
        title: 'State (组合式)',
        markdown: () => import('../markdown/03-state-composition.md')
      }
    },
    {
      path: '/getters-composition',
      name: 'gettersComposition',
      component: () => import('../views/TutorialView.vue'),
      props: { 
        title: 'Getters (组合式)',
        markdown: () => import('../markdown/04-getters-composition.md')
      }
    },
    {
      path: '/actions-composition',
      name: 'actionsComposition',
      component: () => import('../views/TutorialView.vue'),
      props: { 
        title: 'Actions (组合式)',
        markdown: () => import('../markdown/05-actions-composition.md')
      }
    },
    */
    {
      path: '/axios-options',
      name: 'axiosOptions',
      component: () => import('../views/TutorialView.vue'),
      props: { 
        title: '与Axios结合 (选项式)',
        markdown: () => import('../markdown/06-axios-options.md')
      }
    },
    {
      path: '/weather-app',
      name: 'weatherApp',
      component: () => import('../views/TutorialView.vue'),
      props: { 
        title: '综合案例 - 天气预报应用',
        markdown: () => import('../markdown/07-weather-app.md')
      }
    }
  ]
})

export default router 